<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/14
  Time: 20:45
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/personal.css">
    <link rel="icon" href="${pageContext.request.contextPath}/images/home.ico" type="image/x-ico" />
<%--    <link rel="icon" href="../images/hotel.ico" type="image/x-ico" />--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/page.css">

    <!--layui-->
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/modules/layui-icon-extend/iconfont.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link href="favicon.ico" rel="shortcut icon">
</head>
<body>
<div class="all-context">
    <div class="header">
        <div class="header-logo">
            <a href="index.jsp"><img src="${pageContext.request.contextPath}/images/logo.png"></a>
            <div class="header-bar">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item">
                        <a><div><span>今日活动</span></div></a>
                    </li>

                    <li class="layui-nav-item">
                        <a href="customer/wishlist.jsp"><div><span>心愿单</span></div></a>
                    </li>

                    <li class="layui-nav-item">
                        <a><div><span>消息</span></div></a>
                    </li>

                    <li class="layui-nav-item">
                        <a><div><span>帮助</span></div></a>
                    </li>

                    <c:choose>
                        <c:when test="${!empty loginCustomer}">
                            <li class="layui-nav-item">
                                    <%--                            --%>
                                <a class="custImg" href=""><img id="image" src="" class="layui-nav-img">我</a>
                                <dl class="layui-nav-child">
                                    <dd><a href="javascript:;">修改信息</a></dd>
                                    <dd><a href="javascript:;" class="custCenter">个人中心</a></dd>
                                    <dd><a href="javascript:;">历史足迹</a></dd>
                                    <dd><a href="javascript:;" class="out-login" >退出登录</a></dd>
                                </dl>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="layui-nav-item">
                                <a href="customer/register.jsp"><div><span>注册</span></div></a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="customer/login.jsp"><div><span>登录</span></div></a>
                            </li>
                        </c:otherwise>
                    </c:choose>


                </ul>

                <script>
                    //注意：导航 依赖 element 模块，否则无法进行功能性操作
                    layui.use('element', function(){
                        var element = layui.element;

                        //…
                    });
                </script>

            </div>
        </div>
    </div>

    <div id="top1">
        <div class="top1-body">
            <ul>
                <li class="head_survey">我的个人中心</li>
                <li class="head_survey1">我的订单</li>
                <li class="head_survey2">评语</li>
                <li class="head_survey3">优惠卷</li>
                <li class="head_survey4">设置</li>
            </ul>
        </div>

    </div>
    <!--评语-->
    <div class="body-review" >
        <div class="review-left">
            <div class="top-left">
                <div class="image2">
                    <img src="../images/personal.png">
                </div>
                <div class="text-left"><a href="">修改个人资料</a></div>
            </div>
            <div class="form-context">
                <ul>
                    <li class="form1">
                        <div class="form-left">
                            <span>所有点评</span>
                            <div class="form-right">0</div>
                        </div>
                    </li>
                    <li class="form1"><div class="form-left">
                        <span>已审核</span>
                        <div class="form-right">0</div>
                    </div></li>
                    <li class="form1"><div class="form-left">
                        <span>待审核</span>
                        <div class="form-right">0</div>
                    </div></li>
                </ul>
            </div>
        </div>
        <div class="review-right">
            <div class="font-right">
                <div class="image3">
                    <img src="../images/review.png">
                </div>
                <span> 暂时没有评论</span>
            </div>
        </div>
    </div>
    <!--设置-->
    <div class="body-review1">
        <!-- <div class="set-left"></div>-->
        <div class="set-right">
            <form class="userexinfo-form-one">
            <div class="font1">
                <div class="font13">
                    <b><h1>您的xaingjia.com账号</h1></b>
                    <span>下列信息将显示在您发布的点评、评分、照片等旁边。如有任何信息更新，已发布点评旁的相关信息也会随之更新。</span>
                </div>
                <div class="font11">
                    <div class="content1"><span>个人照片</span></div>
                    <div class="content2"><div class="image4"><img src="../images/customImg.png"></div>
                        <div class="content3"> <div class="content31"><img src="../images/camera.png"></div>
                            <div class="content32"><span>更改照片</span>

                            </div>
                            <div class="content33"><span>传一张美美的照片吧！</span></div>
                        </div>
                    </div>
                </div>
                <div class="font12"> <div class="content1"><span>显示名称</span></div>
                    <div class="content41"><input type="text" placeholder="请输入你的昵称">
                        <div class="content42"><span>昵称可以随时更改</span></div>
                    </div>
                </div>
                <div class="font12"> <div class="content1"><span>生日</span></div>
                    <div class="content41"><input type="date">
                        <div class="content42"><span> 请放心，我们仅显示你的年龄范围（如：“25-30岁”）</span></div>
                    </div>
                </div>
                <div class="font12"> <div class="content1"><span>国家</span></div>
                    <div class="content41">
                        <select>
                            <option>中国</option>
                            <option>日本</option>
                            <option>美国</option>
                            <option>伊拉克</option>
                            <option>英国</option>
                            <option>意大利</option>
                            <option>俄罗斯</option>
                        </select>
                    </div>
                </div>
                    <div class="font2">
                        <div class="setting-head">
                            <div class="setting-head_title">
                                <h2 class="setting-head_title_h2">个人信息 - 预定信息</h2>
                            </div>
                            <div class="settings-head_subheading">
                                该信息仅用于自动填写您的资料，加快预订流程。您的信息已被安全保存且不会泄露。
                            </div>
                        </div>
                        <div class="settings-content">
                            <div class="setting-item_lamber">
                                <label>称谓</label>
                            </div>
                            <div class="setting-input">
                                <select name="custSex">
                                    <option>先生</option>
                                    <option>女士</option>
                                </select>
                            </div>
                        </div>
                        <div class="settings-content">
                            <div class="setting-item_lamber">
                                <label>姓名</label>
                            </div>
                            <div class="setting-input">
                                <input type="text" name="custName" value="${sessionScope.Customer.custName}" placeholder="请输入你的姓名">
                            </div>
                        </div>

                        <div class="settings-content">
                            <div class="setting-item_lamber">
                                <label>手机号</label>
                            </div>
                            <div class="setting-input">
                                <input type="text" name="custTelno" value="${sessionScope.Customer.custTelno}" placeholder="请输入你的手机号">
                            </div>
                        </div>
                        <div class="settings-content1">
                            <div class="setting-item_lamber">
                                <label>地址</label>
                            </div>
                            <div class="setting-input">
                                <input type="text" name="custCity" value="${sessionScope.Customer.custCity}" placeholder="请输入你的家庭地址">
                            </div>
                        </div>
                        <div class="settings-content1">
                            <div class="setting-item_lamber">
                                <label>邮箱</label>
                            </div>
                            <div class="setting-input">
                                <input type="text" name="custEmail" value="${sessionScope.Customer.custEmail}" placeholder="请输入你的邮箱">
                            </div>
                        </div>

                </div>
                <div class="fon1">
                    <input type="button" value="提交信息" class="btn-primary-one">
                </div>
            </div>
            </form>
        </div>

    </div>
    <!--优惠券-->
    <div class="body-review2">
        <div class="ccp_mct_header">
            <h1 class="ccp_mct_header_title">我的优惠券</h1>
        </div>
        <div class="ccp_mct_header_operation">
            <div class="ccp_mct_header_operation_filter">
                <select>
                    <option>可用优惠券</option>
                    <option>已使用优惠券</option>
                    <option>已失效优惠券</option>
                </select>
            </div>
            <div class="rules">
                <div class="rule-img">
                    <img src="${pageContext.request.contextPath}/images/deng.png"/>
                </div>
                <div class="rule-text">
                    <p>如何使用礼金券？</p>
                    <span>在结算页面，您可以看到自动添加的礼金券优惠。如果您有多张礼金券，系统将匹配最高优惠额度。您可以手动删除或选择使用其他礼金券和优惠种类。</span>
                </div>
                <div class="rule-text">
                    <p>在哪里可以领取礼金券？</p>
                    <span>您可以前往向家首页，关注我们最新的营销活动。您也可以关注向家官方微信服务号，及时获取最新优惠信息。如果您已经有了礼金券兑换码，可以在本页点击「兑换」输入兑换码领取礼金券。</span>
                </div>
                <div class="rule-text">
                    <p>我的礼金券怎么不见了？</p>
                    <span>礼金券的有效期不尽相同，如果您在可用礼金券找不到已领取的礼金券，可能礼金券已经失效。您可以在本页面查看失效礼金券。</span>
                </div>
            </div>
            <div class="ccp_mct__operation_bar">
                <div class="ccp_mct__operation_bar_sorter">
                    <ul>
                        <a href="javascript:void(0)"><li class="sorter">金额重高到低</li></a>
                        <a href="javascript:void(0)"><li class="sorter">即将失效</li></a>
                        <a href="javascript:void(0)"><li class="sorter">最近领取</li></a>
                    </ul>
                    <label class="lab">排序:</label>
                </div>
            </div>
        </div>
    </div>
    <!--我的订单-->
    <div class="body-review3">
        <div class="mtr-container">
            <div class="orders-head">
                <ul class="orders-ul">
                    <li class="active" >全部订单
                    <li class="active1">待付款
                    </li>
                    <li class="active2">待使用</li>
                    <li class="active3">待评价
                        <span class="num">7</span>
                    </li>
                    <li class="active4">退款/售后</li>
                </ul>
            </div>
            <%--全部订单--%>
            <div class="orders-body">
            <ul class="hot_shop_ul">

            </ul>
               <%-- &lt;%&ndash;分页&ndash;%&gt;
                <div id="demo7" ></div>--%>
            </div>
            <!--待付款-->
            <ul class="orders-body1">
                <span>对不起，没有需要付款的订单</span>
            </ul>
            <!--待使用-->
            <ul class="orders-body2">
                <span>对不起，没有可以使用的订单</span>
            </ul>
            <!--待评价-->
            <div class="orders-body3">
                <ul class="hot_shop_ul1" >

                </ul>
            </div>
            <!--退款售后-->
            <ul class="orders-body4">
                <li class="order-item clearfix">
                    <div class="orders-img">
                        <a href="#" class="link" target="_blank">
                            <img src="../images/shanghai2.png">
                        </a>
                    </div>
                    <div class="orders-info">
                        <div class="info-box">
                            <a href="#" class="link" target="_blank">
                                <p class="orders-title">邻家大酒店</p>
                            </a>
                            <p class="info">下单时间：2020-8-22 19:07</p>
                            <p class="info">数量:1</p>
                        </div>
                    </div>
                    <div class="order-price">总价:￥920</div>
                    <div class="order-status">已取消</div>
                </li>
                <li class="order-item clearfix">
                    <div class="orders-img">
                        <a href="#" class="link" target="_blank">
                            <img src="../images/shanghai2.png">
                        </a>
                    </div>
                    <div class="orders-info">
                        <div class="info-box">
                            <a href="#" class="link" target="_blank">
                                <p class="orders-title">邻家大酒店</p>
                            </a>
                            <p class="info">下单时间：2020-8-22 19:07</p>
                            <p class="info">数量:1</p>
                        </div>
                    </div>
                    <div class="order-price">总价:￥920</div>
                    <div class="order-status">已取消</div>
                </li>
                <li class="order-item clearfix">
                    <div class="orders-img">
                        <a href="#" class="link" target="_blank">
                            <img src="../images/shanghai2.png">
                        </a>
                    </div>
                    <div class="orders-info">
                        <div class="info-box">
                            <a href="#" class="link" target="_blank">
                                <p class="orders-title">邻家大酒店</p>
                            </a>
                            <p class="info">下单时间：2020-8-22 19:07</p>
                            <p class="info">数量:1</p>
                        </div>
                    </div>
                    <div class="order-price">总价:￥920</div>
                    <div class="order-status">已取消</div>
                </li>
                <li class="order-item clearfix">
                    <div class="orders-img">
                        <a href="#" class="link" target="_blank">
                            <img src="../images/shanghai2.png">
                        </a>
                    </div>
                    <div class="orders-info">
                        <div class="info-box">
                            <a href="#" class="link" target="_blank">
                                <p class="orders-title">邻家大酒店</p>
                            </a>
                            <p class="info">下单时间：2020-8-22 19:07</p>
                            <p class="info">数量:1</p>
                        </div>
                    </div>
                    <div class="order-price">总价:￥920</div>
                    <div class="order-status">已取消</div>
                </li>
                <li class="order-item clearfix">
                    <div class="orders-img">
                        <a href="#" class="link" target="_blank">
                            <img src="../images/shanghai2.png">
                        </a>
                    </div>
                    <div class="orders-info">
                        <div class="info-box">
                            <a href="#" class="link" target="_blank">
                                <p class="orders-title">邻家大酒店</p>
                            </a>
                            <p class="info">下单时间：2020-8-22 19:07</p>
                            <p class="info">数量:1</p>
                        </div>
                    </div>
                    <div class="order-price">总价:￥920</div>
                    <div class="order-status">已取消</div>
                </li>
            </ul>
            <div style="text-align: center;">
                <div id="pager" class="pager clearfix">
                </div>
            </div>
            <script src="../js/personal.js"></script>
            <script src="../js/jquery-3.4.1.min.js"></script>
            <script src="../js/jquery.z-pager.js"></script>
            <script type="text/javascript">
                $("#pager").zPager({
                    totalData: 50,
                    htmlBox: $('#wraper'),
                    btnShow: true,
                    ajaxSetData: false
                });
                function currentPage(currentPage){
                    /*
                        触发页码数位置： Page/js/jquery.z-pager.js 64行
                    */
                    console.log("当前页码数：" + currentPage);
                }
            </script>

        </div>
    </div>
    <!--我的中心-->
    <div class="body-review4">
        <div class="set-left1">
            <div class="profile-card">
                <div class="profile-card-info">
                    <img src="../images/person1.png">
                </div>
                <div class="updateText">
                    <a href=""><span>修改个人资料</span>
                </a>
                </div>
            </div>
            <div id="body-search1">
                <div id="mini-h2" >境内外特价搜不停</div>
                <form>
                    <ul>
                        <li>
                            <span class="body-search1-p" style="font-size: 15px; font-family: 'Adobe 宋体 Std L'">目的地/住宿名称</span>
                            <input type="text" class="body-search1-p">
                        </li>
                        <li>
                            <span class="body-search1-p" style="font-size: 15px; font-family: 'Adobe 宋体 Std L'">入住日期</span>
                            <input type="date" class="body-search1-p">
                        </li>
                        <li>
                            <span class="body-search1-p" style="font-size: 15px; font-family: 'Adobe 宋体 Std L'">退房日期</span>
                            <input type="date" class="body-search1-p">
                        </li>

                        <li><select class="body-search1-q">
                            <option>1位成人</option>
                            <option>2位成人</option>
                            <option>3位成人</option>
                            <option>4位成人</option>
                            <option>5位成人</option>
                            <option>6位成人</option>
                        </select></li>

                        <li><select class="body-search1-q">
                            <option>无儿童</option>
                            <option>1位儿童</option>
                            <option>2位儿童</option>
                            <option>3位儿童</option>
                            <option>4位儿童</option>
                            <option>5位儿童</option>
                            <option>6位儿童</option>
                        </select></li>

                        <li><select class="body-search1-q">
                            <option>1间房</option>
                            <option>2间房</option>
                            <option>3间房</option>
                            <option>4间房</option>
                            <option>5间房</option>
                            <option>6间房</option>
                        </select></li>

                        <input type="button" value="搜特价" id="body-search1-commit">
                    </ul>
                </form>
            </div>
            <div class="info-travel">
                <div class="wish">
                    <div class="image6">
                        <img src="../images/love.png">
                    </div>
                    <div class="wishText"><span>我的心愿单</span></div>
                </div>
                <div class="wishText1">
                    <a href="javascript:void(0)">我的下次出行</a>
                    <span>(</span>
                    <span>0</span>
                    <span>)</span>
                    <span class="fuhao"> > </span>
                </div>
            </div>
        </div>
        <div class="set-right1">
            <h2 class="t1">欢迎来到向家!!!</h2>
            <div class="right1">
                <div class="ico1">
                    <div class="image7">
                        <img src="../images/bm.png">
                    </div>
                    <p>网罗全球最低价</p><br>
                    <span>登录后可解锁服务</span>
                </div>
                <div class="ico1">
                    <div class="image7">
                        <img src="../images/person.png">
                    </div>
                    <p>添加个人信息</p><br>
                    <span>添加个人信息，可以帮助你快速预定房间，还可以根据你的设置来推荐</span>
                </div>
                <div class="ico1">
                    <div class="image7">
                        <img src="../images/mobile.png">
                    </div>
                    <p>下载移动App</p><br>
                    <span>电子确认在手，查看更加方便</span>
                </div>
            </div>
            <h2 class="t2">电子确认信、每日优惠和更多便利功能一手把握！</h2>
            <form>
                <input type="email" placeholder="请输入你的邮箱"><br>
                <input type="submit" value="发送电子邮箱">
            </form>
        </div>
    </div>
</div>


</body>
<script>
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };

    $(".btn-primary-one").click(function() {
        var formData = $(".userexinfo-form-one").serialize();
        console.log(formData);
        $.ajax({
            url:"${pageContext.request.contextPath}/customer/save",
            type:"post",//get
            data:formData,
            dataType:"json",
            success:function(result){
                console.log(result)
            }
        });
    });

    /*自动调用服务器得到orderInfo*/
    $.ajax({
        url:"${pageContext.request.contextPath}/customer/orderAll",
        type:"get",
        dateType:"json",
        success:function (result){
            console.log(result)
            // console.log("所有订单信息："+ JSON.stringify(result));
            <%--var ulEle=${".hot_shop"};--%>
            var ulEle = document.querySelector(".hot_shop_ul1");
            console.log(ulEle)
            var orderInfoVo =result.data;
            console.log(orderInfoVo.length)
            console.log(typeof(orderInfoVo))
            for(var i=0;i<orderInfoVo.length;i++){
                var imgLoc=orderInfoVo[i].imgLoc;
                var hotelName=orderInfoVo[i].hotelName;
                var orderTime=orderInfoVo[i].orderTime;
                var orderPrice=orderInfoVo[i].orderPrice;
                var orderInfoState=orderInfoVo[i].orderInfoState;
                var orderState=orderInfoVo[i].orderState;

                /* 待评论*/
                if(orderInfoState ==1) {
                    orderInfoState = "未评论"

                    var orderLi = "<li class=\"order-item clearfix\">\n" +
                        "                    <div class=\"orders-img\">\n" +
                        "                        <a href=\"#\" class=\"link\" target=\"_blank\">\n" +
                        "                            <img src=\""+imgLoc+"\"/>\n" +
                        "                        </a>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"orders-info\">\n" +
                        "                        <div class=\"info-box\">\n" +
                        "                            <a href=\"#\" class=\"link\" target=\"_blank\">\n" +
                        "                                <p class=\"orders-title\">" + hotelName + "</p>\n" +
                        "                            </a>\n" +
                        "                            <p class=\"info\">下单时间：<span>" + orderTime + "</span></p>\n" +
                        "                            <p class=\"info\">数量:1</p>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"order-price\">总价:￥<span>" + orderPrice + "</span></div>\n" +
                        "                    <div class=\"order-status\">" + orderInfoState + "</div>\n" +
                        "                </li>"
                    ulEle.innerHTML+=orderLi
                }


            }


        }
    });

    $.ajax({
        url:"${pageContext.request.contextPath}/customer/orderAll",
        type:"get",
        dateType:"json",
        success:function (result){
            console.log(result)
            // console.log("所有订单信息："+ JSON.stringify(result));
            <%--var ulEle=${".hot_shop"};--%>
            var ulEle = document.querySelector(".hot_shop_ul");
            console.log(ulEle)
            var orderInfoVo =result.data;
            console.log(orderInfoVo.length)
            console.log(typeof(orderInfoVo))
            for(var i=0;i<orderInfoVo.length;i++){
                var imgLoc=orderInfoVo[i].imgLoc;
                var hotelName=orderInfoVo[i].hotelName;
                var orderTime=orderInfoVo[i].orderTime;
                var orderPrice=orderInfoVo[i].orderPrice;
                var orderInfoState=orderInfoVo[i].orderInfoState;
                var orderState=orderInfoVo[i].orderState;
                if(orderState ==1){
                    orderState ="已消费"
                }else{
                    orderState ="未消费"
                }
                var orderLi = "<li class=\"order-item clearfix\">\n" +
                    "                    <div class=\"orders-img\">\n" +
                    "                        <a href=\"#\" class=\"link\" target=\"_blank\">\n" +
                    "                            <img src=\""+imgLoc+"\"/>\n" +
                    "                        </a>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"orders-info\">\n" +
                    "                        <div class=\"info-box\">\n" +
                    "                            <a href=\"#\" class=\"link\" target=\"_blank\">\n" +
                    "                                <p class=\"orders-title\">"+hotelName+"</p>\n" +
                    "                            </a>\n" +
                    "                            <p class=\"info\">下单时间：<span>"+orderTime+"</span></p>\n" +
                    "                            <p class=\"info\">数量:1</p>\n" +
                    "                        </div>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"order-price\">总价:￥<span>"+orderPrice+"</span></div>\n" +
                    "                    <div class=\"order-status\">"+orderState+"</div>\n" +
                    "                </li>"
                ulEle.innerHTML+=orderLi


            }
            /*分页*/

            var pageNum = result.data.pageNum; // 当前页码
            var pages = result.data.pages; // 总页数
            var total = result.data.total; // 总记录数
            var prePage = result.data.prePage;// 上一页页码
            var nextPage = result.data.nextPage; // 下一页页码

            //渲染页码数据
            // 渲染 页码
            var pageDiv = $(".pageDiv"); // 页码div 显示
            pageDiv.css("display", "block");

            if (pageNum > 1) {
                $(".prePageDiv").css("display", "block");
                // 首页按钮
                $(".firstPageBtn").attr("href", "javascript:getProduct(1)");
                //上一页按钮
                $(".prePageBtn").attr("href", "javascript:getProduct(" + prePage + ")");

            } else {
                $(".prePageDiv").css("display", "block");
            }


            $(".pageNum").text(pageNum);  // 当前时第几页
            $(".pages").html(pages);  // 总页码
            $(".totals").text(total);// 总记录数


            if (pageNum != pages) {//
                $(".nextPageDiv").css("display", "block");
                // 下一页按钮
                $(".nextPageBtn").attr("href", "javascript:getProduct(" + nextPage + ")");
                // 最后一页按钮
                $(".lastPageBtn").attr("href", "javascript:getProduct(" + pages + ")");


            } else {
                $(".nextPageDiv").css("display", "block");
            }




        }
    });

/*    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'demo7'
            , count: 10
            ,theme:'#27b2ff'
            ,limit: 3
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj) {
                console.log(obj.curr);
                getProduct(obj.curr)
            }
        });
    });

    getProduct(1);*/

</script>
</html>

